<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItems" v-permission="'material.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 260px;" placeholder="输入备件/编码按回车" clearable class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString">
      </el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">

        <span v-if="v.key == 'modify_time'">
          {{getStatus(v)}}
        </span>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
      <template v-slot:operation='v'>
        <a href="javascript:;" class="text-green" @click="subsidiaryLedgerShow = true">明细账</a>
        <a href="javascript:;" class="text-green" @click.stop="attachmentRetrieval(v,0)">备件入库</a>
        <a href="javascript:;" class="text-yellow" @click.stop="attachmentRetrieval(v,1)">备件出库</a>
        <a href="javascript:;" class="text-blue">编辑</a>
        <a style="margin-left:5px;" href="javascript:;" class="text-red">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
    <!-- 报废弹框 -->
    <el-dialog title="备件报废" class="dialog-padding" :visible.sync="scrapDialog">
      <div v-if="!scrapApplicationShow">
        <el-button type="primary" class="fr mb-10 ml-10" @click="scrapApplication">报废申请 </el-button>
        <el-button type="primary" class="fr mb-10 " @click="scrapInStock">在库报废</el-button>
      </div>
      <el-form :model="form" v-if="scrapApplicationShow">
        <el-form-item label="备件编号" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input-number v-model="form.number" autocomplete="off"></el-input-number>
        </el-form-item>
        <el-form-item label="原因" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.textarea" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="审核人" :label-width="formLabelWidth">
          <el-select v-model="form.Audit" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="scrapApplicationShow">
        <el-button @click="scrapApplicationShow = false">取 消</el-button>
        <el-button type="primary" @click="scrapDialog = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 备件出库/入库 -->
    <z-form-dialog :data="entryAndOutData" :formProps="entryAndOutformProps" :fields="entryAndOutfields"
      @submit="entryAndOutsubmit" :submitLoading="submitLoading" :visible.sync="attachmentRetrievalShow">
    </z-form-dialog>
    <!-- 明细账 subsidiaryLedger -->
    <el-dialog title="备件明细账" :visible.sync="subsidiaryLedgerShow" width="60%" :before-close="setparentShow"
      append-to-body>
      <z-table :list="list" :tableProps="subsidiaryLedgerTableProps" :columns="subsidiaryLedgercolumns">
      </z-table>
      <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
        @change="getList"></z-pagination>

    </el-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  name: 'attachmentStandingBook',
  mixins: [commonMixin],
  components: {},
  props: {},
  data() {
    return {
      query: {
        queryString: '',
        page: 1,
        size: 10,
      },
      name: '备件',
      tableProps: {
        border: true,
        opsColWith: 280,
        fixed: false,
        highlightCurrentRow: true,
        hideOperations: false,
      },
      columns: [
        { title: '备件编码', key: 'key_part_no', width: 100, fixed: 'left' },
        { title: '备件名称', key: 'key_part_name', width: 100 },
        { title: '备件规格型号', key: 'category', width: 140 },
        // { title: '制作商', key: 'key_part_type', width: 80 },
        // { title: '供应商', key: 'model_name', width: 80 },
        { title: '存放位置', key: 'brief_code', width: 100 },
        { title: '安全库存', key: 'key_part_desc', minWidth: 100 },
        { title: '实际库存', key: 'unit_code', width: 100 },
        { title: '采购周期', key: 'modify_user', width: 100 },
        { title: '保管人', key: 'modify_time', width: 80 },
        { title: '设备类别', key: 'modify_time', width: 100 },
        { title: '设备编号', key: 'modify_time', width: 100 },
        { title: '状态', key: 'modify_time', width: 60, fixed: 'right' },
      ],
      list: [
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
      ],
      fields: [
        { title: '备件编号', key: 'key_part_no', span: 12 },

        { title: '备件名称', key: 'key_part_type', span: 12 },
        {
          title: '备件规格型号',
          key: 'model_id',
          span: 12,
        },
        // { title: '制造商', key: 'key_part_name', span: 12 },
        // { title: '供应商', key: 'brief_code', span: 12 },
        { title: '存放位置', key: 'key_part_desc', span: 12 },
        { title: '安全库存', key: 'unit_mode', span: 12 },
        { title: '实际库存', key: 'unit_code', span: 12 },
        { title: '采购周期', key: 'unit_name', span: 12 },
        { title: '保管人', key: 'status', span: 12 },
        { title: '设备类别', key: 'safty_inventory', span: 12 },
        { title: '设备编号', key: 'version', span: 12 },
        {
          title: '上传附件',
          key: 'filelist',
          span: 24,
          name: 'fileUploader',
          tips: '不能大于20M',
          props: {
            action: '',
            // accept: '.jpg,.png,.pdf,',
            limit: 5,
            autoUpload: false,
            multiple: true,
            'on-change': this.uploadOnchange,
            'before-remove': this.beforeRemove,
            'on-preview': this.onPreview,
            'on-exceed': this.handleExceed,
          },
        },
      ],
      // 上传数据
      formData: new FormData(),
      removeFiles: [],
      // 报废弹框
      scrapDialog: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      formLabelWidth: '120px',
      // 备件出库/入库
      attachmentRetrievalShow: false,
      entryAndOutData: {},
      entryAndOutformProps: {
        dialogWidth: '70%',
        labelWidth: '140px',
        title: '出库',
      },
      entryAndOutfields: [],
      // 报废申请
      scrapApplicationShow: false,
      // 明细账
      subsidiaryLedgerTableProps: {
        border: true,
        opsColWith: 80,
        fixed: false,
        hideOperations: true,
      },
      subsidiaryLedgercolumns: [
        { title: '备件编号', key: 'key_part_no', width: 100, fixed: 'left' },
        { title: '备件料号', key: 'key_part_name', width: 100 },
        { title: '制造商', key: 'category', width: 140 },
        { title: '供应商', key: 'model_name', width: 80 },
        { title: '入库日期', key: 'brief_code', width: 100 },
        { title: '数量', key: 'key_part_desc', minWidth: 100 },
      ],
      subsidiaryLedgerShow: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 创建数据
    createItems() {
      this.formData = new FormData()
      this.createItem()
    },
    // 获取备件状态,可以直接写在table里
    getStatus(val) {
      return '正常'
    },
    //报废弹框
    scarpattachment(v) {
      this.scrapDialog = true
    },
    // 申请报废
    scrapApplication() {
      this.scrapApplicationShow = true
    },
    // 在库报废
    scrapInStock() {
      this.$confirm('此操作将报废所有的此号备件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 出库/入库按钮弹框
    attachmentRetrieval(v, type) {
      if (type) {
        this.entryAndOutfields = [
          {
            title: '出库申请单',
            key: 'key_part_no',
            span: 12,
            name: 'select',
            options: [
              { label: '1号单', value: 1 },
              { label: '2号单', value: 2 },
              { label: '3号单', value: 3 },
              { label: '4号单', value: 4 },
            ],
          },

          { title: '备件料号', key: 'key_part_type', span: 12 },
          {
            title: '备件规格型号',
            key: 'model_id',
            span: 12,
          },
          { title: '备件编号', key: 'key_part_name', span: 12 },
          { title: '数量', key: 'brief_code', span: 12 },
          { title: '用途', key: 'key_part_desc', span: 12 },
          { title: '申请人', key: 'unit_mode', span: 12 },
          { title: '出库人', key: 'unit_code', span: 12 },
          { title: '出库日期', key: 'unit_name', span: 12, required: true },
          { title: '备注', key: 'version', span: 24, name: 'textarea' },
        ]
        this.entryAndOutformProps.title = '出库'
      } else {
        this.entryAndOutfields = [
          {
            title: '入库类型',
            key: 'key_part_no',
            span: 12,
            name: 'radio',
            options: [
              { label: '采购入库', value: '1' },
              { label: '退回入库', value: '2' },
            ],
          },
          {
            title: '备件分类',
            key: 'key_part_type',
            span: 12,
            name: 'radio',
            options: [
              { label: '单件', value: '1' },
              { label: '批件', value: '2' },
            ],
          },
          {
            title: '备件编号',
            key: 'model_id',
            span: 12,
            props: { disabled: true },
          },
          { title: '备件料号', key: 'key_part_name', span: 12 },
          { title: '备件规格型号', key: 'brief_code', span: 12 },
          { title: '入库日期', key: 'key_part_desc', span: 12 },
          { title: '数量', key: 'unit_mode', span: 12 },
        ]
        this.entryAndOutformProps.title = '入库'
      }
      this.attachmentRetrievalShow = true
    },
    // 出库/入库确认按钮
    entryAndOutsubmit() {},
    // 上传
    uploadOnchange(file, fileList) {
      let f = file.raw
      const isLt20M = f.size / 1024 / 1024 < 20
      if (!isLt20M) {
        fileList.splice(fileList.indexOf(f), 1)
        return this.$message.error('上传档案大小不能超过 20MB!')
      }
      alert(9)
      this.formData.append('file', f)
    },
    // 清除附件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定要删除${file.name}?`, 提示, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if (file.FileId) {
          // 已经有附件了,进行删除
          this.removeFiles.push(file.FileId)
        } else {
          this.formData = new FormData()
          // 刚上传没有点确定
          fileList.forEach((i) => {
            if (!i.FileId && i.name != file.name) {
              this.formData.append('file', i.raw)
            }
          })
        }
      })
    },
    // 预览
    onPreview(file) {
      alert('没有接口看个毛')
    },
    // 超过最大上传数
    handleExceed() {
      return this.$message.warning('最多只能上传5张图片')
    },
  },
}
</script>

<style lang="scss" scoped>
.icon-class {
  font-size: 18px;
  cursor: pointer;
}
.dialog-padding ::v-deep .el-dialog__body {
  padding: 30px 20px 50px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
</style>